<template>
  <div class="system-setting">
    <div class="setting-left">
      <div class="back">
        <span @click.stop="$emit('back')"><i class="iconfont wos-to-left-line" /></span>
        {{ $t('default.setting') }}
      </div>
      <div class="home" @mousedown.stop @dblclick.stop @click.stop="$emit('back')">
        <span><i class="iconfont wos-home fs12" /></span>
        {{ $t('setting.home') }}
      </div>
      <div class="search" @mousedown.stop @dblclick.stop>
        <input v-model="search" type="text" :placeholder="`${$t('default.search')}${$t('default.setting')}`" />
        <span @click.stop="search = ''">
          <i class="iconfont" :class="[!search ? 'wos-search-left fs12' : 'wos-close-wechat fs18']" />
        </span>
      </div>
      <div class="menu-title" @mousedown.stop @dblclick.stop>{{ menu.name }}</div>
      <ul class="menu-list" @mousedown.stop @dblclick.stop>
        <li
          v-for="item in menu.children"
          :key="item.name"
          :class="{ checked: currentIcon === item.icon }"
          @click.stop="handleChangeMenu(item)"
        >
          <span><i class="iconfont fs14" :class="item.icon" /></span>
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="setting-right">
      <div class="header">
        <system-child-btn />
      </div>
      <div class="name fs26">{{ currentName }}</div>
      <div class="content" @mousedown.stop @dblclick.stop>
        <component v-if="checkedComponent" :is="checkedComponent" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import SystemChildBtn from '@/base/systemWindow/systemChildBtn.vue'
import { computed, inject, onBeforeMount, ref } from 'vue'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import type { Component, PropType } from 'vue'
import type { ISystemLeftMenu, ISystemList } from '@/components/systemWindow/systemSetting/settingMenu.vue'

const props = defineProps({
  menu: {
    type: Object as PropType<ISystemList>,
    required: true
  }
})
defineEmits(['back'])

const runningTasksStore = useRunningTasksStore()

const appId = inject<string>('appId') || ''
const taskId = inject<string>('taskId') || ''

const search = ref<string>('')
const currentIcon = ref<string>('')
const checkedComponent = ref<Component>()
const currentName = computed<string>(() => {
  const componentData = runningTasksStore.findTask(appId, taskId)?.componentData
  const find = props.menu?.children?.find((item) => item.icon === componentData?.menuIcon)
  return find?.name || ''
})

// 选择菜单
const handleChangeMenu = (data: ISystemLeftMenu) => {
  if (data.component) {
    runningTasksStore.setTaskPatch(appId, taskId, {
      componentData: {
        menuIcon: data.icon
      }
    })
    currentIcon.value = data.icon
    checkedComponent.value = data.component
  }
}

const init = () => {
  if (!props.menu?.children) return
  const componentData = runningTasksStore.findTask(appId, taskId)?.componentData
  const find = props.menu.children.find((item) => item.icon === componentData?.menuIcon)
  if (find) handleChangeMenu(find)
}

onBeforeMount(() => {
  init()
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/common';
@import '@/assets/scss/mixin';

$setting-menu-margin: 15px;

.system-setting {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--system-modal-drag-color);

  .setting-left {
    width: 320px;
    height: 100%;
    background-color: var(--task-bar-bg-color);
    backdrop-filter: blur(10px);

    .back {
      display: flex;
      align-items: center;
      height: $system-drag-bar-height;

      > span {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-right: 15px;
        width: 50px;
        height: 100%;

        &:hover {
          color: #fff;
          background-color: var(--theme-color);
        }
      }
    }

    .home {
      margin-top: 16px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      height: 50px;

      &:hover {
        @include hover-model;
      }

      > span {
        margin: 0 $setting-menu-margin;
      }
    }

    .search {
      box-sizing: border-box;
      margin: 0 $setting-menu-margin;
      height: 34px;
      border: 2px solid var(--task-modal-border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(--system-modal-drag-bg-color);

      > input {
        color: var(--system-modal-drag-color);
        box-sizing: border-box;
        padding-left: 12px;
        width: calc(100% - 38px);
        height: 100%;
      }

      > span {
        cursor: pointer;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 28px;
        height: 100%;
      }
    }

    .menu-title {
      margin: 0 $setting-menu-margin;
      padding-top: 24px;
      padding-bottom: 28px;
    }

    .menu-list {
      width: 100%;
      height: calc(100% - 32px - 50px - 26px - 34px - 68px);
      overflow-y: auto;

      li {
        display: flex;
        align-items: center;
        padding: 0 $setting-menu-margin;
        height: 50px;
        position: relative;

        &.checked::before {
          content: '';
          width: 5px;
          height: 25px;
          background-color: var(--theme-color);
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }

        &:hover {
          @include hover-model;
        }

        > span {
          margin-right: $setting-menu-margin;
        }
      }
    }
  }

  .setting-right {
    width: calc(100% - 320px);
    height: 100%;
    background-color: var(--system-modal-drag-bg-color);

    .header {
      display: flex;
      align-items: center;
      height: $system-drag-bar-height;
      position: relative;
    }

    .name {
      padding: 28px 26px 10px;
      height: 36px;
      display: flex;
      align-items: center;
    }

    .content {
      padding: 0 26px;
      width: 100%;
      height: calc(100% - $system-drag-bar-height - 36px - 38px);
      box-sizing: border-box;
      overflow-y: auto;
    }
  }
}
</style>
